<template>
    <view class="gjl-view">
        <view class="form-ul">
            <view class="form-li">
                <view class="upload-box">
                    <view class="upload-img" @click="imageUpload">
                        <view class="no-img" v-if="!form.bookstoreImg">
                            <mIcon type="jiahao2" size="24" color="#2BA8FC"></mIcon>
                        </view>
                        <view class="have-img" v-else>
                            <image :src="form.bookstoreImg" mode="aspectFit"></image>
                        </view>
                    </view>
                    <view class="text-box">
                        <view class="big">
                            上传封面
                        </view>
                        <view class="tip">
                            JPEG格式 大小不超过5M
                        </view>
                    </view>
                </view>
            </view>
            <view class="center">
                <view class="form-li">
                    <view class="blue-title8">
                        书籍名称
                    </view>
                    <view class="input-box">
                        <input class="uni-input" v-model="form.bookstoreName" confirm-type="confirm" placeholder-style="color:#999;font-size:28rpx;"
                            placeholder="请输入书籍名称" />
                    </view>
                </view>
                <view class="form-li">
                    <view class="blue-title8">
                        系列名
                    </view>
                    <view class="input-box">
                        <input class="uni-input" v-model="form.bookstoreSeriesName" confirm-type="confirm" placeholder-style="color:#999;font-size:28rpx;"
                            placeholder="请输入系列名（不是系列图书可不填）" />
                    </view>
                </view>
                <view class="form-li">
                    <view class="blue-title8">
                        作者
                    </view>
                    <view class="input-box">
                        <input class="uni-input" v-model="form.bookstoreAuthor" confirm-type="confirm" placeholder-style="color:#999;font-size:28rpx;"
                            placeholder="请输入作者名字" />
                    </view>
                </view>
                <view class="form-li">
                    <view class="blue-title8">
                        出版社
                    </view>
                    <view class="input-box">
                        <input class="uni-input" v-model="form.bookstorePress" confirm-type="confirm" placeholder-style="color:#999;font-size:28rpx;"
                            placeholder="请输入出版社" />
                    </view>
                </view>
            </view>
            <view class="bottom">
                <view class="form-li">
                    <view class="left">
                        出版日期
                    </view>
                    <picker mode="date" :value="time" @change="bindTimeChange">
                        <view class="right">
                            <view class="text">{{time}}</view>
                            <mIcon type="arrRight" size="12" color="#2BA8FC"></mIcon>
                        </view>
                    </picker>
                    <!-- <view class="right">
                        
                        <view class="text">
                            请选择日期
                        </view>
                        
                    </view> -->
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="btn" @click="commitForm">
                提交
            </view>
        </view>
        <mFileimg ref="fileimg" @upload="imageCallback" Width="400px" Height="300px"></mFileimg>
    </view>
</template>

<script>
    import mFileimg from '@/components/m-fileimg/m-fileimg.vue';
    import service from "@/service";
    let formFilter = (val)=>{
        let obj = {
            bookstoreImg: '请上传书籍图片',
            bookstoreName: '请填写书籍名称',
            bookstoreAuthor: '请填写作者名称',
            bookstorePress: '请填写出版社',
            bookstoreTime: '请选择出版日期'
        }
        return obj[val] || ''
    }
    export default {
        components:{
            mFileimg
        },
        data() {
            return {
                form: {
                    bookstoreImg: '',
                    bookstoreName: '',
                    bookstoreSeriesName: '',
                    bookstoreAuthor: '',
                    bookstorePress: '',
                    bookstoreTime: ''
                },
                time: '请选择日期',
                pos: {}
            }
        },
        onLoad(res) {
            this.pos = res
            if(res.bookstoreSortId){
                this.form.bookstoreSortId = res.bookstoreSortId
            }
        },
        methods: {
            // 添加图片
            async imageUpload() {
            	this.$refs.fileimg.fSelect();
            },
            // 裁剪回调
            imageCallback: function(res) {
                this.form.bookstoreImg = res.server;
            },
            formFilter,
            // 提交表单
            commitForm(){
                for(let item in this.form){
                    if(!this.form[item]){
                        if(this.formFilter(item)){
                            uni.showToast({
                                title: this.formFilter(item),
                                icon: 'none',
                                duration:2000
                            })
                            return
                        }
                    }
                }
                service.mineService.BookstoreAddManualBookstore({
                    data: {...this.form},
                    success: res => {
                        uni.navigateBack({
                            delta:1
                        })
                    },
                    fail: ()=>{
                        
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 时间选择器
            bindTimeChange(e){
                this.time = e.detail.value
                this.form.bookstoreTime = new Date(e.detail.value)/1000
            },
            // 选择图片
            chooseImg() {
                uni.chooseImage({
                    count: this.count,
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        // uni.showModal({
                        //     title: '提示',
                        //     content: `${tempFilePaths[0]}`
                        // })
                        for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                            uni.uploadFile({
                                url: 'https://xcxapi.thumbrary.com/xcxapi/uploadFile', //仅为示例，非真实的接口地址
                                filePath: tempFilePaths[i],
                                name: 'image',
                                formData: {
                                    'type': 'image'
                                },
                                success: (uploadFileRes) => {
                                    let res = JSON.parse(uploadFileRes.data)
                                    this.form.bookstoreImg = res.result.fileUrl
                                }
                            });
                        }
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: '相册选择图片失败，请检查权限',
                            icon: 'none',
                            duration: 3000
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    page {
        height: 100%;
    }

    .gjl-view {
        min-height: 100%;
        overflow: hidden;
        background: rgba(249, 249, 249, 1);
        .footer{
            margin: 67rpx 30rpx 98rpx;
            background-color: #fff;
            .btn{
                text-align: center;
                background:rgba(43,168,252,1);
                border-radius:8rpx;
                padding: 24rpx 0;
                font-size:28rpx;
                font-weight:400;
                color:rgba(255,255,255,1);
            }
        }
        .form-ul {
            margin-top: 20rpx;

            .bottom {
                margin-top: 20rpx;
                padding: 40rpx 30rpx 40rpx 72rpx;
                background: rgba(255, 255, 255, 1);

                .form-li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .left {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                    }

                    .right {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(43, 168, 252, 1);
                        display: flex;
                        align-items: center;

                        .text {
                            margin-right: 31rpx;
                        }
                    }
                }
            }

            .center {
                margin-top: 20rpx;
                padding: 40rpx 95rpx 35rpx 50rpx;
                background-color: #fff;

                .form-li+.form-li {
                    margin-top: 20rpx;
                }

                .form-li {
                    .blue-title8 {
                        padding-left: 31rpx;
                        font-size: 36rpx;
                        font-weight: bold;
                        color: rgba(51, 51, 51, 1);
                    }

                    .input-box {
                        margin-top: 24rpx;
                        border: 1px solid rgba(229, 229, 229, 1);
                        margin-left: 31rpx;
                        height: 88rpx;
                        display: flex;
                        align-items: center;

                        .uni-input {
                            margin-left: 31rpx;
                            width: 100%;
                        }
                    }
                }
            }

            .form-li {
                .upload-box {
                    display: flex;
                    align-items: flex-end;
                    padding: 36rpx 0 35rpx 30rpx;
                    background: rgba(255, 255, 255, 1);

                    .upload-img {
                        .no-img {
                            width: 212rpx;
                            height: 212rpx;
                            border: 1px solid rgba(43, 168, 252, 1);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        .have-img {
                            display: flex;

                            image {
                                width: 212rpx;
                                height: 212rpx;
                            }
                        }
                    }

                    .text-box {
                        margin-left: 26rpx;

                        .big {
                            font-size: 28rpx;
                            font-weight: bold;
                            color: rgba(51, 51, 51, 1);
                        }

                        .tip {
                            margin-top: 15rpx;
                            font-size: 24rpx;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                        }
                    }
                }
            }
        }
    }
</style>
